<template>
  <div>

	<myheader></myheader>

	<br /><br />

			<!--面包屑导航-->
			<Breadcrumb :datas="datas" ></Breadcrumb>

	

	<section class="featured-block text-center">
		<div class="container">


			<table>
					<tr >
						<td style="padding:5px;">
							
							用户名:

						</td>
						<td style="padding:5px;">
							
							<input type="text" v-model="username" />

						</td>
					</tr>

					<tr>
						<td style="padding:5px;">
							
							密码:

						</td>
						<td style="padding:5px;">
							
							<input type="password" v-model="password" />

						</td>
					</tr>

					<tr>
						<td style="padding:5px;">
							

						</td>
						<td style="padding:5px;">
							
							<!-- 滑块验证码 -->

							<drag-verify

								:width="width"
								:height="height"
								:text="text"
								ref="Verify"
							>
								

							</drag-verify>

						</td>
					</tr>

					<tr>
						<td style="padding:5px;">
							

						</td>
						<td style="padding:5px;">
							
							<Button @click="submit">登录</Button> &nbsp;&nbsp;

							<img style="cursor:pointer;" src="http://localhost:8000/static/sina.png" @click="sina" />
							&nbsp;
							<img @click="dingding" src="http://127.0.0.1:8000/static/dingding.png">
						
						</td>
					</tr>

			</table>
			
			

		</div>
	</section>
	

	
	
	
	<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>
		
		
	</footer>
    
  </div>
  
</template>


 
<script>

//导包
import myheader from './myheader.vue';
import dragVerify from 'vue-drag-verify';
import {config,formatXml} from '../config.js';

export default {
  data () {
    return {
      msg: "这是一个变量",
      //声明面包屑变量
      datas:[{title:'首页',route:{name:'index'}},{title:'登录页面'}],
      username:'',
      password:'',
      code:'',
      //滑块验证码
      text:'请将滑块拖动到最右侧',
      width:300,
      height:40
    }
  },
  //注册组件标签
  components:{
  		'dragVerify':dragVerify,
  		'myheader':myheader

  },
  mounted:function(){

   
  
},
  methods:{

	//   钉钉
	dingding(){
		let appid = 'dingoahmelrgy51wltnjzs';
		let redirect_uri = 'http://localhost:8000/ding_back/';
		
		// 组装url
		let url = 'https://oapi.dingtalk.com/connect/qrconnect?appid='+appid+'&response_type=code&scope=snsapi_login&state=STATE&redirect_uri='+redirect_uri;
		
		// 进行跳转
		window.location.href = url;
	  },

  	// 新浪微博登录
	sina(){

		let url = "https://api.weibo.com/oauth2/authorize?client_id=2636039333&redirect_uri=http://127.0.0.1:8000/md_admin/weibo";

		//跳转
		window.location.href = url;

	},

  	//提交登录
  	submit:function(){

		//判断是否拖动滑块
		console.log(this.$refs.Verify.isPassing);
		  
		//判断
		if(this.username == ''){

			this.$Message('用户名不能为空');
			return false;
		}

		if(this.password == ''){

			this.$Message('密码不能为空');
			return false;
		}
		
		if(this.$refs.Verify.isPassing==false){
			this.$Message('请滑动验证');
			return false;
		}


		//请求后台接口
		this.axios.get('http://localhost:8000/login/',{params:{username:this.username,password:this.password}}).then((result) =>{

			console.log(result);
			this.$Message(result.data.message);

			// 判断登录
			if(result.data.code==200){

				localStorage.setItem('username', result.data.username),
				localStorage.setItem('uid', result.data.uid),
				localStorage.setItem('jwt', result.data.uid),

				// 跳转页面
				this.$router.push('/')
				
			}else{
				this.$Message(result.data.message)
			}

		});


	}

     
  }
}


</script>
 
<style>



</style>